/* eslint-disable */
<template>
  <div class="edit-menu" v-show="!$parent.dtp">
    <div class="title"><span>基础编辑器</span></div>
    <!--      <el-button v-on:click="test">TEST</el-button>-->
    <el-collapse accordion>
      <el-collapse-item title="添加节点" name="1">
        <add-node-component/>
      </el-collapse-item>
      <el-collapse-item title="添加连接" name="2">
        <add-link-component/>
      </el-collapse-item>
      <el-collapse-item title="编辑节点" name="3">
        <edit-node-component/>
      </el-collapse-item>
      <el-collapse-item title="编辑连接" name="4">
        <edit-link-component />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>

import addNodeComponent from "@/views/kgeditor/components/editBase/addNodeComponent";
import addLinkComponent from "@/views/kgeditor/components/editBase/addLinkComponent";
import editNodeComponent from "@/views/kgeditor/components/editBase/editNodeComponent";
import editLinkComponent from "@/views/kgeditor/components/editBase/editLinkComponent";

export default {
  name: "editBaseComponent",
  components: {
    editLinkComponent,
    editNodeComponent,
    addLinkComponent,
    addNodeComponent
  }
};
</script>

<style>
.title {
  height: 30px;
  font-size: 15px;
}
.edit-menu {
  position: absolute;
  left: 15px;
  top: 15px;
  padding: 10px;
  margin-bottom: 10px;
  width: 200px;
  border: 1px solid #c8c8c8;
  border-radius: 5px;
  background-color: white;
}
.edit-menu .el-button {
  width: 100%;
}
.edit-menu .row {
  margin-top: 10px;
}
.edit-menu .row:first-child {
  margin-top: 0;
}
.edit-menu input {
  height: 20px;
  width: 100%;
  padding: 5px;
  border-bottom: 1px solid #e4e7ed;
}
.edit-menu input:focus {
  border-bottom: 1px solid #c0c4cc;
}

.editNodeBox .row {
  height: 30px;
}
.editNodeBox .row:after {
  content: "clear";
  clear: both;
  height: 0;
  visibility: hidden;
}
.editNodeBox .row .title,
.editNodeBox .row .selector {
  float: left;
}
.editNodeBox .row .title {
  margin-right: 5px;
  height: 30px;
  line-height: 30px;
  width: 50px;
  font-size: 10px;
  text-align: left;
}
.editNodeBox .row .selector {
  width: 125px;
}
</style>